<!DOCTYPE html>
<html class="light" lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>NexusGo - 您的AI智能行程规划助手</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#1A202C", // Black
                        "primary-light": "#F7FAFC", // Off-white
                        "secondary": "#4A5568", // Gray for accents
                        "background-light": "#FFFFFF", // White
                        "background-dark": "#1A202C", // Black
                        "text-light": "#1A202C", // Black
                        "text-dark": "#FFFFFF", // White
                        "card-light": "#FFFFFF", // White
                        "card-dark": "#2D3748", // Dark Gray
                        "border-light": "#E2E8F0", // Light Gray
                        "border-dark": "#4A5568", // Gray
                        "subtle-light": "#F7FAFC", // Off-white
                        "subtle-dark": "#2D3748", // Dark Gray
                        "subtle-text-light": "#4A5568", // Gray
                        "subtle-text-dark": "#A0AEC0" // Light Gray
                    },
                    fontFamily: {
                        "display": ["Plus Jakarta Sans", "Noto Sans SC", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.5rem",
                        "lg": "0.75rem",
                        "xl": "1rem",
                        "full": "9999px"
                    },
                    boxShadow: {
                        'subtle': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
                    }
                },
            },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    </style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-text-light dark:text-text-dark">
<div class="relative flex w-full flex-col">
<div class="layout-container flex h-full grow flex-col">
<div class="flex flex-1 justify-center px-4 sm:px-8 md:px-16 lg:px-24 xl:px-40 py-5">
<div class="layout-content-container flex flex-col w-full max-w-7xl flex-1">
<header class="flex items-center justify-between whitespace-nowrap bg-card-light/80 dark:bg-card-dark/80 backdrop-blur-sm sticky top-5 z-50 rounded-xl border border-border-light dark:border-border-dark px-6 py-3">
<div class="flex items-center gap-3 text-text-light dark:text-text-dark">
<div class="text-primary size-7">
<span class="material-symbols-outlined !text-3xl">travel_explore</span>
</div>
<h2 class="text-xl font-bold leading-tight tracking-[-0.015em]">NexusGo</h2>
</div>
<nav class="hidden lg:flex flex-1 justify-center items-center gap-2">
<a class="text-sm font-medium leading-normal text-subtle-text-light dark:text-subtle-text-dark hover:text-primary dark:hover:text-white px-4 py-2 rounded-lg hover:bg-primary-light dark:hover:bg-subtle-dark transition-colors duration-200" href="#">我的行程</a>
<a class="text-sm font-medium leading-normal text-subtle-text-light dark:text-subtle-text-dark hover:text-primary dark:hover:text-white px-4 py-2 rounded-lg hover:bg-primary-light dark:hover:bg-subtle-dark transition-colors duration-200" href="#">灵感发现</a>
<a class="text-sm font-medium leading-normal text-subtle-text-light dark:text-subtle-text-dark hover:text-primary dark:hover:text-white px-4 py-2 rounded-lg hover:bg-primary-light dark:hover:bg-subtle-dark transition-colors duration-200" href="#">使用帮助</a>
</nav>
<div class="flex items-center gap-4">
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 text-primary dark:text-white text-sm font-bold leading-normal tracking-[0.015em] hover:bg-primary-light dark:hover:bg-subtle-dark transition-colors border border-primary dark:border-border-dark">
<span class="truncate">登录</span>
</button>
<button class="hidden sm:flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-primary text-white dark:bg-white dark:text-black text-sm font-bold leading-normal tracking-[0.015em] hover:bg-primary/90 dark:hover:bg-white/90 transition-colors">
<span class="truncate">注册</span>
</button>
</div>
</header>
<main class="flex flex-col gap-16 md:gap-24 py-16">
<section class="flex flex-col gap-10 px-4 text-center items-center">
<div class="flex flex-col gap-4 max-w-3xl">
<h1 class="text-text-light dark:text-text-dark text-4xl font-black leading-tight tracking-[-0.033em] sm:text-5xl md:text-6xl">
                                AI 智能规划，旅行从未如此简单
                            </h1>
<p class="text-subtle-text-light dark:text-subtle-text-dark text-base font-normal leading-normal sm:text-lg">
                                输入您的旅行想法，NexusGo 将在数秒内为您生成个性化行程。告别繁琐规划，拥抱轻松旅途。
                            </p>
</div>
<div class="w-full max-w-4xl p-4 bg-card-light dark:bg-card-dark rounded-xl shadow-subtle border border-border-light dark:border-border-dark">
<form class="grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
<div class="flex flex-col text-left gap-2 md:col-span-2">
<label class="text-sm font-medium text-text-light dark:text-text-dark" for="destination">目的地</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-text-light dark:text-subtle-text-dark">location_on</span>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-2 focus:ring-primary dark:focus:ring-white border border-border-light dark:border-border-dark bg-subtle-light dark:bg-subtle-dark h-12 placeholder:text-subtle-text-light dark:placeholder:text-subtle-text-dark pl-10 pr-4 text-sm" id="destination" placeholder="例如：日本东京"/>
</div>
</div>
<div class="flex flex-col text-left gap-2">
<label class="text-sm font-medium text-text-light dark:text-text-dark" for="duration">旅行天数</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-text-light dark:text-subtle-text-dark">calendar_today</span>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-2 focus:ring-primary dark:focus:ring-white border border-border-light dark:border-border-dark bg-subtle-light dark:bg-subtle-dark h-12 placeholder:text-subtle-text-light dark:placeholder:text-subtle-text-dark pl-10 pr-4 text-sm" id="duration" placeholder="例如：5天"/>
</div>
</div>
<div class="flex flex-col text-left gap-2">
<label class="text-sm font-medium text-text-light dark:text-text-dark" for="style">旅行风格</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-subtle-text-light dark:text-subtle-text-dark">emoji_people</span>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-text-light dark:text-text-dark focus:outline-0 focus:ring-2 focus:ring-primary dark:focus:ring-white border border-border-light dark:border-border-dark bg-subtle-light dark:bg-subtle-dark h-12 placeholder:text-subtle-text-light dark:placeholder:text-subtle-text-dark pl-10 pr-4 text-sm" id="style" placeholder="休闲、探险..."/>
</div>
</div>
<button class="w-full flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-5 bg-primary text-white dark:bg-white dark:text-black text-base font-bold leading-normal tracking-[0.015em] hover:bg-primary/90 dark:hover:bg-white/90 transition-colors">
<span class="truncate">快速规划</span>
</button>
</form>
</div>
</section>
<section class="flex flex-col gap-10 px-4 @container">
<div class="flex flex-col gap-2 max-w-2xl">
<h2 class="text-text-light dark:text-text-dark text-[32px] font-bold leading-tight tracking-[-0.033em] sm:text-4xl">
                                核心功能一览
                            </h2>
<p class="text-subtle-text-light dark:text-subtle-text-dark text-base font-normal leading-normal">探索 NexusGo 如何让您的旅行规划变得前所未有的简单与智能。</p>
</div>
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
<div class="flex flex-1 gap-4 rounded-xl border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark p-6 flex-col">
<div class="text-primary dark:text-white flex items-center justify-center bg-primary-light dark:bg-subtle-dark rounded-lg w-12 h-12"><span class="material-symbols-outlined">auto_awesome</span></div>
<div class="flex flex-col gap-1">
<h3 class="text-text-light dark:text-text-dark text-lg font-bold leading-tight">个性化行程</h3>
<p class="text-subtle-text-light dark:text-subtle-text-dark text-sm font-normal leading-normal">根据您的兴趣、预算和时间，AI为您量身定制独一无二的旅行计划。</p>
</div>
</div>
<div class="flex flex-1 gap-4 rounded-xl border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark p-6 flex-col">
<div class="text-primary dark:text-white flex items-center justify-center bg-primary-light dark:bg-subtle-dark rounded-lg w-12 h-12"><span class="material-symbols-outlined">map</span></div>
<div class="flex flex-col gap-1">
<h3 class="text-text-light dark:text-text-dark text-lg font-bold leading-tight">智能路线优化</h3>
<p class="text-subtle-text-light dark:text-subtle-text-dark text-sm font-normal leading-normal">自动规划每日最佳游览路线，节省交通时间，让您玩得更尽兴。</p>
</div>
</div>
<div class="flex flex-1 gap-4 rounded-xl border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark p-6 flex-col">
<div class="text-primary dark:text-white flex items-center justify-center bg-primary-light dark:bg-subtle-dark rounded-lg w-12 h-12"><span class="material-symbols-outlined">edit_note</span></div>
<div class="flex flex-col gap-1">
<h3 class="text-text-light dark:text-text-dark text-lg font-bold leading-tight">灵活编辑调整</h3>
<p class="text-subtle-text-light dark:text-subtle-text-dark text-sm font-normal leading-normal">随时轻松添加、删除或调整行程中的任何活动，打造完美旅程。</p>
</div>
</div>
</div>
</section>
<section class="flex flex-col gap-6 px-4">
<h2 class="text-text-light dark:text-text-dark text-[28px] font-bold leading-tight tracking-[-0.015em] sm:text-3xl">热门目的地推荐</h2>
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
<div class="group relative bg-cover bg-center flex flex-col rounded-xl justify-end p-4 aspect-[3/4] overflow-hidden transition-transform duration-300 hover:-translate-y-1" data-alt="A serene temple with a pagoda surrounded by autumn foliage in Kyoto, Japan." style='background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuBjBG90BEsaqGfoVKiE3-b5qhcENzJDl9L72fxSvEfzM_1f2jTXTYXRvUVRtMPyPb4bLt_X53xrNEs5GyEV48FtbsLcOuZtMWmP40QjDzt70_YcJbWs9kLpbiAYhfH9tNyAYivhCnrZWO--ZM_FO43vHfgmEBDaah1Wq7clYOn2F4tdUamXtnngZ4ZR4OWUaBQ-B6vDnzM5G6cnNIkbtYnxNC1l0s-2SYKQO7rM40eoHRePr28clWrKpJ1tWwtCJXt-uGrdxTWTeQ");'>
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-300"></div>
<div class="relative z-10">
<p class="text-white text-lg font-bold leading-tight">京都</p>
<span class="text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full bg-white text-black mt-2 inline-block">文化</span>
</div>
</div>
<div class="group relative bg-cover bg-center flex flex-col rounded-xl justify-end p-4 aspect-[3/4] overflow-hidden transition-transform duration-300 hover:-translate-y-1" data-alt="A majestic mountain range with snow-capped peaks and a green valley in the Swiss Alps." style='background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuBHzmjjcG42qxwNUDVicsJC5NS_r_suU_IXx9IxONg6ro2c98r8liHG0ylt2xR38oo5qo74YVrcBhOOOYft7zmYAy83kSfab0zQPz4m0XzGybwbG2ikEEAsIs8ojUYm0eu3QitPoecwNc-AZ5-k1xyVy04VO2oWxDbf-qVn9qazvydjKcsYj0m3hFHt1eMFICztekdVPvkTV6jmK1bzlVHnhDUU17R1pNuvnbAMMRN1NcNimg-MSoaqJmqp35nyHjVffgsc36CSMg");'>
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-300"></div>
<div class="relative z-10">
<p class="text-white text-lg font-bold leading-tight">瑞士阿尔卑斯</p>
<span class="text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full bg-white text-black mt-2 inline-block">探险</span>
</div>
</div>
<div class="group relative bg-cover bg-center flex flex-col rounded-xl justify-end p-4 aspect-[3/4] overflow-hidden transition-transform duration-300 hover:-translate-y-1" data-alt="Lush, terraced rice paddies under a bright blue sky in Bali." style='background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuDs0-Mnd3Svlc9FTYhe3k94Yd1yVn3lefsgmIQIBDXV6ZJ_-Qm_6RfbR-cZ5xWdjdbo1vHwQDKFJLieUGAY5aRzdFKKBC-C3YF1qYjUewcVRjnaWDoS8toTQ3h8Uty1ol850e0Fp_N9Ix3M6p37WrS31ufoZmCS1vVXS56v7MtS9wdak2OaGtKQAxvvQvMOx1rF24Aj8jgMcXggP3SRLoFCcxHQDAEcGbaXLgThOV6DS6-v-8uv8UNTmcWB3scK9ksk9ZuzFlhsSw");'>
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-300"></div>
<div class="relative z-10">
<p class="text-white text-lg font-bold leading-tight">巴厘岛</p>
<span class="text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full bg-white text-black mt-2 inline-block">休闲</span>
</div>
</div>
<div class="group relative bg-cover bg-center flex flex-col rounded-xl justify-end p-4 aspect-[3/4] overflow-hidden transition-transform duration-300 hover:-translate-y-1" data-alt="The ancient Colosseum in Rome, Italy, bathed in golden sunlight." style='background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuCSbfWKf6FecSi_DwkE_-6xHgsBSpMsi57_PGrHaLE8hpzFwFLdXqwjELtZe0bV8PlRcJqCHycqhfnABV6FcZgtSzMdEBXcf9oTkWLNYwiFe9LGvXvgdLgFVimCHU30_nPanX9143X5Sqt3iioaa2rqWq9Zb-ldI96WIi18QlcevS6JKRqeHYdBY5t1ia5VhLKcSrsyr1JySbaf5g396_7dRkYc2tzDsDm3I8TrH1TMTDz_aCPBiGN6-QCvWfJtTodTgyLZtRjK9g");'>
<div class="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-300"></div>
<div class="relative z-10">
<p class="text-white text-lg font-bold leading-tight">罗马</p>
<span class="text-xs font-semibold uppercase tracking-wider px-2 py-1 rounded-full bg-white text-black mt-2 inline-block">历史</span>
</div>
</div>
</div>
</section>
</main>
<footer class="mt-16 border-t border-border-light dark:border-border-dark pt-8 pb-6">
<div class="flex flex-col md:flex-row justify-between items-center gap-6 px-4">
<div class="flex items-center gap-3 text-subtle-text-light dark:text-subtle-text-dark">
<span class="material-symbols-outlined !text-xl text-primary dark:text-white">travel_explore</span>
<p class="text-sm">© 2024 NexusGo. 保留所有权利。</p>
</div>
<div class="flex gap-6">
<a class="text-sm text-subtle-text-light dark:text-subtle-text-dark hover:text-primary dark:hover:text-white" href="#">服务条款</a>
<a class="text-sm text-subtle-text-light dark:text-subtle-text-dark hover:text-primary dark:hover:text-white" href="#">隐私政策</a>
<a class="text-sm text-subtle-text-light dark:text-subtle-text-dark hover:text-primary dark:hover:text-white" href="#">联系我们</a>
</div>
</div>
</footer>
</div>
</div>
</div>
</div>
</body></html>